<template>
  <el-card>
    <!-- 标题 -->
    <template #header>店铺管理</template>
    <!-- 内容 -->
    <el-form
      :model="shopsFrom"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      size="mini"
    >
      <el-form-item label="店铺名称" prop="name">
        <el-input v-model="shopsFrom.name"></el-input>
      </el-form-item>
      <el-form-item label="店铺公告" prop="bulletin">
        <el-input
          type="textarea"
          :rows="6"
          placeholder="请输入内容"
          v-model="shopsFrom.bulletin"
        >
        </el-input>
      </el-form-item>

      <el-form-item label="店铺头像" prop="avatar">
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/shop/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="店铺图片">
        <el-upload
          action="http://127.0.0.1:5000/shop/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess2"
          :file-list="fileList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

      <el-form-item label="配送费" prop="deliveryPrice">
        <el-input v-model="shopsFrom.deliveryPrice"></el-input>
      </el-form-item>
      <el-form-item label="配送时间" prop="deliveryTime">
        <el-input v-model="shopsFrom.deliveryTime"></el-input>
      </el-form-item>
      <el-form-item label="配送描述" prop="description">
        <el-input v-model="shopsFrom.description"></el-input>
      </el-form-item>
      <el-form-item label="店铺评分" prop="score">
        <el-input v-model="shopsFrom.score"></el-input>
      </el-form-item>
      <el-form-item label="销量" prop="sellCount">
        <el-input v-model="shopsFrom.sellCount"></el-input>
      </el-form-item>
      <el-form-item label="活动">
        <el-checkbox-group v-model="shopsFrom.supports">
          <el-checkbox label="在线支付，满28减5"></el-checkbox>
          <el-checkbox label="VC无限橙果汁全场8折"></el-checkbox>
          <el-checkbox label="单人精彩套餐"></el-checkbox>
          <el-checkbox label="特价饮品八折抢购"></el-checkbox>
          <el-checkbox label="单人特色套餐"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="营业时间" prop="date">
        <el-date-picker
          v-model="shopsFrom.date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getshop, editShop1 } from '../../api/shop'
import _ from 'lodash'
export default {
  data() {
    return {
      // 双向数据绑定
      shopsFrom: {
        id: '',
        name: '',
        bulletin: '',
        avatar: '',
        deliveryPrice: '',
        deliveryTime: '',
        description: '',
        score: '',
        sellCount: '',
        supports: [],
        pics: [],
        date: [],
        minPrice: ''
      },
      dialogImageUrl: '',
      dialogVisible: false,
      pin: 'http://127.0.0.1:5000/upload/shop/',
      fileList: [],
      // 规则
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        bulletin: [{ required: true, message: '不能为空', trigger: 'blur' }],
        avatar: [{ required: true, message: '不能为空', trigger: 'chage' }],
        deliveryPrice: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        deliveryTime: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        description: [{ required: true, message: '不能为空', trigger: 'blur' }],
        score: [{ required: true, message: '不能为空', trigger: 'blur' }],
        sellCount: [{ required: true, message: '不能为空', trigger: 'blur' }],
        supports: [{ required: true, message: '不能为空', trigger: 'chage' }],
        date: [{ required: true, message: '不能为空', trigger: 'chage' }]
      },
      imageUrl: '',
      allc: []
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    // 渲染
    async getlist() {
      const { data } = await getshop()
      // console.log(data)
      this.shopsFrom = data
      // 图片的渲染
      this.imageUrl = this.pin + data.avatar
      this.fileList = []
      data.pics.forEach(item => {
        this.fileList.push({
          name: item,
          url: this.pin + item
        })
      })
    },
    // 如果验证成功，就发请求
    submitForm(shopsFrom) {
      this.$refs[shopsFrom].validate(async valid => {
        if (valid) {
          const cloneFrom = _.cloneDeep(this.shopsFrom)
          cloneFrom.supports = JSON.stringify(cloneFrom.supports)
          cloneFrom.date = JSON.stringify(cloneFrom.date)
          cloneFrom.pics = []
          this.fileList.forEach(item => {
            cloneFrom.pics.push(item.name)
          })
          cloneFrom.pics = JSON.stringify(cloneFrom.pics)
          // console.log(cloneFrom)
          // 当表单验证通过，则可以发起请求
          const data = await editShop1(cloneFrom)
          // console.log(data)
          if (data.code === 0) {
            this.$message({
              type: 'success',
              message: data.msg
            })
            this.getlist()
          } else {
            this.$message.error('对不起，不符合')
          }
        } else {
          this.$message.error('需要填写完整')
          return false
        }
      })
    },
    // 清空
    resetForm(shopsFrom) {
      this.$refs[shopsFrom].resetFields()
    },
    // 头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.shopsFrom.avatar = res.imgUrl
      // console.log(this.imageUrl)
    },
    // 图片的格式的规则
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const arr = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
      // 判断当前图片的type类型是否在上面的数组中
      // arr.includes(file.type)
      const isJPG = arr.includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 照片墙 移出
    handleRemove(file, fileList) {
      // console.log(file, fileList)
      this.fileList = this.fileList.filter(item => {
        return item.name !== file.name
      })
    },
    // 添加
    handleAvatarSuccess2(res, file) {
      this.fileList.push({
        name: res.imgUrl,
        url: this.pin + res.imgUrl
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.el-input,
.el-checkbox-group {
  width: 400px;
}
</style>
